<template>
    <div>
        <a href="/typeadd">房型信息添加</a>
        <h3>房型信息显示页面</h3>
        房型名称: <input type="text" v-model="info.Name">
        房型大小: <input type="text" v-model="info.Min">-<input type="text" v-model="info.Max">
        <input type="button" value="查询" @click="getList">
        <table class="table">
            <tbody>
                <tr>
                    <th>编号</th>
                    <th>房型名称</th>
                    <th>房型价格</th>
                    <th>房型大小</th>
                    <th>房型预览图</th>
                    <th>所在地址</th>
                </tr>
                <tr v-for="item in data.list" :key="item.houseId">
                    <td>{{item.houseId}}</td>
                    <td>{{item.houseName}}</td>
                    <td>{{"$"+item.price}}</td>
                    <td>{{item.number+"㎡"}}</td>
                    <td> <img :src="item.img" width="60" height="60" alt=""></td>
                    <td>{{item.address}}</td>                  
                </tr>
            </tbody>
        </table>
        共{{data.count}}条
        每页{{info.pagesize}}行
        当前{{info.pageindex}}/{{data.page}}页
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageindex-1)">
        <span v-for="im in data.page" @change="gopage(im)">&emsp;{{im}}&emsp;</span>
        <input type="button" value="下一页" @click="gopage(info.pageindex+1)">
        <input type="button" value="尾页" @click="gopage(data.page)">
        <input type="number" v-model="info.pageindex">
        <input type="button" value="跳转" @click="gopage(info.pageindex)">
        <select v-model="info.pagesize" @change="show">
            <option value="">请选择</option>
            <option v-for="im in arr" :value="im">每页{{im}}行</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const info:any=reactive({
    Name:'',
    Max:'',
    Min:'',
    pageindex:1,
    pagesize:3
})
const data:any=reactive({
    list:[],
    count:0,
    page:0
})
const gopage=(num:any)=>{
    if(num<1)
{
    info.pageindex=1;
    return;
}
if(num>data.page)
{
    info.pageindex=data.page;
    return;
}
info.pageindex=num;
getList();

}
const show=()=>{
    info.pageindex=1;
    getList();
}
let arr:any=ref([3,5,7]);
onMounted(()=>{
    getList();
})
const getList=()=>{
    axios.get('https://localhost:7267/api/Boss/GetAll',{params:info}).then(res=>{
        Object.assign(data,res.data);
    })
}
</script>

<style scoped>

</style>